<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>velocity.js实践</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
    <style>
        *{
            padding: 0;
            margin: 0;
            pointer-events: none;
        }
        body{
            background: #060b14;
            overflow:hidden;
            font-family: "Helvetica Neue","Open Sans";
            font-weight:100;
        }
        a{
            color: #4bc2f1;
            text-decoration: none;
        }
        a:hover{
            text-decoration: underline;
        }
        #container{
            perspective: 50px;
            -webkit-perspective: 50px;
            -moz-perspective: 50px;
            -ms-perspective: 50px;

            -webkit-transform-origin:50% 100%;
            -moz-transform-origin:50% 100%;
            -ms-transform-origin:50% 100%;
            -o-transform-origin:50% 100%;
            transform-origin:50% 100%;

            opacity:0.55;
        }
        #welcome{
            position: fixed;
            width: 22rem;
            left: 50%;
            top: 45%;
            margin-top:-1rem;
            margin-left:-11rem;

            font-weight:200;
            color: #fff;
            opacity:0.65;
            text-align: center;
            font-size:0.775rem;
            line-height: 1.05rem;
            letter-spacing: 0.135rem;
            word-spacing:-0.075rem;
        }

        @media screen and (max-width:400px){
            #welcome{
                font-size:0.45rem !important;
            }
        }

        #browserWidthNotice{
            font-style: italic;
            display: none;
        }

        #logo{
            position: fixed;
            right: 0.75rem;
            bottom: 0.75rem;

            cursor: pointer;

            text-decoration: none;
            color: #d6d6d6;
            font-size: 2rem;
            letter-spacing: 0.025rem;
        }

        #logoDot{
            color: #d74580;
        }

        .circle{
            position: fixed;
            width: 30px;
            height: 30px;

            border-radius: 30px;
            background-color: #4bc2f1;
        }

    </style>
</head>
<body>
<div id="welcome">
    <p id="browserWidthNotice">
        Make your browser wider.
    </p>
    <p>
        No webGL.No canvas.Just pure DOM.
    </p>
    <p>
        <span id="count">175</span>Divs with border-radius and box-shadow.
    </p>
</div>
<a href="index.html" id="logo">Velocity<span id="logoDot">.</span>js</a>
<div id="container"></div>
<script src="js/jquery-2.2.1.js"></script>
<script src="js/velocity.min.js"></script>
<script>

    /****************

     设备检测

     ****************/
    /*i是忽略大小写*/
    var isWebkit = /Webkit/i.test(navigator.userAgent),
            isChrome = /Chrome/i.test(navigator.userAgent),
            isMobile = !!("ontouchstart" in window),
            isAndroid = /Android/i.test(navigator.userAgent),
            isIE = document.documentMode;//document.documentMode ie8及以上版本都支持

    /****************

     重定向

     ****************/
    if(!isMobile && !isAndroid && !isChrome){
        alert("虽然Velocity.js可以在所有手机浏览器上运行，但是这个3D例子只适用于ios设备和android设备的chrome浏览器。 将重定向到你的Velocity文档首页。");
        window.location = "ProductionTable.html";
    }
    /****************

     动画设置

    ****************/
    /*在两个数之间随机生成一个数*/
    function r(min,max){
        return Math.floor(Math.random()*(max-min+1))+min;
    }
    $.Velocity.defaults.easing = "easeInOutsine";



    /****************

     圆形创建

     ****************/



    var circleCount,
       circleHtml="",
       $count=$("#conut"),
       $circles ;


    if(window.location.hash){
        circleCount = window.locatoin.hash.slice(1);
    }else {
        circleCount = isMobile ? (isAndroid ? 40 : 60) : (isChrome ? 175 : 125);
    }
    for(var i = 0 ; i < circleCount ; i++){
        circleHtml+="<div class='circle'></div>";
    }
    $circles = $(circleHtml);
    $count .html(circleCount);

    /****************

     容器动画

     ****************/
    var $container = $("#container"),
        $browserWidthNotice = $("#browserWidthNotice"),
        $welcome = $("#welcome");

    /*查询窗口的尺寸*/
    var screenWidth=window.screen.availWidth,
        screenHeight=window.screen.availHeight,
        chromeHeight = screenHeight  - (document.documentElement.clientHeight || screenHeight);

    /*定义Z轴动画范围*/
    var translateZMin=-725,
            translateZMax=600;

    var containerAnimationMap = {
        perspective:[215,50],
        opacity:[0.90,0.55]
    };

    /*当你使用transform的3D变换时，ie10会出现问题。*/
    if(!isIE){
        containerAnimationMap.rotateZ = [5,0];
    }
    /*确保占满整个屏幕，这个例子的变换是在屏幕宽度内，不是窗口*/
    if((document.documentElement.clientWidth / screenWidth) < 0.8){
        $browserWidthNotice.show();
    }

    /*淡出welcome*/
    $welcome.velocity({ opacity : [ 0 ,0.65 ]}, { display : "none" , delay :3500 ,duration : 1100});

    /*容器动画*/

    $container
       .css("perspective-origin",screenWidth/2 + "px "+((screenHeight * 0.45) - chromeHeight)+ "px")
       .velocity(containerAnimationMap,
          {
              duration:800,
              loop:1,
              delay:3000
               }
       );

    /*利用阴影增强webkit的视觉效果*/
    if(isWebkit){
        $circles.css("boxShadow","0px 0px 4px 0px #4bc2f1");
    }
    /****************

     圆形动画

     ****************/
    $circles
        .velocity({
            opacity:[
                function(){return Math.random();},
                function(){return Math.random + 0.1;}
            ],
            translateX:[
                function(){return "+=" + r(-screenWidth/2.5,screenWidth/2.5);},
                function(){return r(0,screenWidth);}
            ],
            translateY:[
                function(){return "+=" +r(-screenHeight/2.75,screenHeight/2.75);},
                function(){return r(0,screenHeight);}
            ],
            translateZ:[
                function(){return "+=" +r(translateZMin,translateZMax)},
                function(){return r(translateZMin,translateZMax);}
            ]
            },{duration:6000})
    .velocity("reverse",{easing:"easeOutQuad"})
    .velocity({ opacity : 0 },{ duration :2000, complete : function(){
        $welcome
                .html("<a href='https://www.youtube.com/watch?v=MDLiVB6g2NY&hd=1'>Watch the making of this demo.</a><br /><br />Go create something amazing.<br />Sincerely, <a href='http://twitter.com/shapiro'>@Shapiro</a>")
                .velocity({ opacity : 0.75 }, { duration :3500 , display :"block"})
                .find("*").add($welcome).css("pointer-event","auto");
    }
    })
    .appendTo($container);
</script>
</body>
</html>